<template>
  <div class="card">
    <Galleria :value="images" v-model:activeIndex="activeIndex" :responsiveOptions="responsiveOptions" :numVisible="5"
              containerStyle="width: 600px;">
      <template #item="slotProps">
        <v-img aspect-ratio="1" :src="slotProps && slotProps.item?slotProps.item[srcLabel]:''" @click="handleView(slotProps.item[srcLabel])"   style="max-height: 600px;aspect-ratio: initial; display: block"/>
      </template>
      <template #thumbnail="slotProps">
        <v-img :src="slotProps && slotProps.item?slotProps.item[thumbnailLabel]:''"  style="display: block;width: 50px;"/>
      </template>
<!--      <template #caption="slotProps">-->
<!--        <div class="text-xl mb-2 font-bold">{{ slotProps.item[titleLabel] }}</div>-->
<!--        <p class="text-white">{{ slotProps.item[altLabel] }}</p>-->
<!--      </template>-->
    </Galleria>

  </div>
  <image-preview-full :src="preview_src" v-model:visible="visible"/>
</template>

<script setup lang="ts">
import {ref, onMounted} from "vue";
import Galleria from 'primevue/galleria';
import ImagePreviewFull from "~/components/ai/ImagePreviewFull.vue";

interface Props {
  srcLabel?: string;
  thumbnailLabel?: string;
  altLabel?: string;
  titleLabel?: string;
}

//当前激活的序号
const activeIndex = ref(0)
watch(activeIndex, (newValue, oldValue) => {
  console.log(newValue, oldValue)
})
// 全屏预览
const visible = ref(false)
const preview_src = ref("")
const handleView = (src: string) => {
  console.log("屏幕点击",src)
  visible.value = true
  preview_src.value = images.value[activeIndex.value][props.srcLabel]
}

// 图片数组
// const images = ref<any>([])
const images=defineModel({
  default: () => [] as any[],
})

const imageurl = 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/ComfyUI_00001_.png'
// images.value = [
//   {
//     src: imageurl,
//     thumbnail: imageurl,
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
//   {
//     src: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/19659-769977270-woman%2C%20flower%20dress%2C%20colorful%2C%20darl%20background%2Cflower%20armor%2Cgreen%20theme%2Cexposure%20blend%2C%20medium%20shot%2C%20bokeh%2C%20(hdr.png',
//     thumbnail: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
//   {
//     src: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     thumbnail: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
//   {
//     src: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/19659-769977270-woman%2C%20flower%20dress%2C%20colorful%2C%20darl%20background%2Cflower%20armor%2Cgreen%20theme%2Cexposure%20blend%2C%20medium%20shot%2C%20bokeh%2C%20(hdr.png',
//     thumbnail: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
//   {
//     src: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     thumbnail: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
//   {
//     src: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/19659-769977270-woman%2C%20flower%20dress%2C%20colorful%2C%20darl%20background%2Cflower%20armor%2Cgreen%20theme%2Cexposure%20blend%2C%20medium%20shot%2C%20bokeh%2C%20(hdr.png',
//     thumbnail: 'https://wangbo0808.oss-cn-shanghai.aliyuncs.com/aidraw/00004-2024-04-11_Restart.png',
//     alt: 'Description for Image 1',
//     title: 'Title 1'
//   },
// ]

const props = withDefaults(defineProps<Props>(), {
  srcLabel: 'src',
  thumbnailLabel: 'thumbnail',
  altLabel: 'alt',
  titleLabel: 'title'
});


onMounted(() => {

});

const responsiveOptions = ref([
  {
    breakpoint: '1300px',
    numVisible: 5
  },
  {
    breakpoint: '575px',
    numVisible: 1
  }
]);
</script>
